<script setup>
import SqlBuildDelete from '@/views/beetlsql/sql/SqlBuildDelete.vue'
import SqlBuildInsert from '@/views/beetlsql/sql/SqlBuildInsert.vue'
import SqlBuildSelect from '@/views/beetlsql/sql/SqlBuildSelect.vue'
import SqlBuildUpdate from '@/views/beetlsql/sql/SqlBuildUpdate.vue'
import Codemirror from "codemirror-editor-vue3"
import "codemirror/mode/sql/sql"
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  currRow: Object,
})

const emit = defineEmits([
  'fetchList',
])

const currRow = ref(props.currRow)
const execVisible = ref(true)
const sourceSql = ref(currRow.value.sqlTemplate || '')
const sqlManagerId = ref(currRow.value.sqlManagerId)
const sqlLanguage = ref(currRow.value.sqlLanguage)
const tableType = ref(currRow.value.tableType)
const sqlType = ref(currRow.value.sqlType)
const returnVal = ref('')
const logStr = ref(currRow.value.sqlTemplate || '')

const sqlBuildTitle = ref('构建SQL语句')

// const execOper = () => {
//   axios.post("/db/sql/manager/exec", {
//     sourceSql: sourceSql.value,
//     id: sqlManagerId.value,
//   }).then(r => {
//     const res = r.data
//     if(res.code != 200){
//       showMsg(res)
      
//       return
//     }
//     returnVal.value = res.data.returnVal
//     logStr.value = res.data.logStr
//   }).catch(e => {
//     console.error(e)
//   })
// }

// 代码编辑器
const cmRef = ref()

const cmOptions = {
  mode: "text/x-sql",
}

const logRef = ref()

const logOptions = {
  mode: "log",
  readOnly: true,
  theme: "default",
}

const onChange = (val, cm) => {
  //console.log(val)
  //console.log(cm.getValue())
}

const onInput = val => {
  //console.log(val)
}

const onReady = cm => {
  //console.log(cm.focus())
}

onMounted(() => {
  setTimeout(() => {
    cmRef.value?.refresh()
    logRef.value?.refresh()
  }, 1000)
})

onUnmounted(() => {
  cmRef.value?.destroy()
  logRef.value?.destroy()
})

const updateSql = data => {
  logStr.value = data || ''
  emit('fetchList', null)
}

// 回调信息
// const snackbar = reactive(API_URLS.resultMsg)

// const showMsg = res => {
//   $resultMsg.show(res,snackbar)
// }
</script>

<template>
  <VDialog
    v-model="execVisible"
    scrollable
    persistent
    max-width="1000"
    class="ivy-sql-build-dialog"
  >
    <!-- <VSnackbar
      v-model="snackbar.msgVisible"
      location="top"
      :color="snackbar.msgColor"
    >
      {{ snackbar.msgContent }}
    </VSnackbar> -->
    <DialogCloseBtn @click="execVisible = !execVisible" />
    <VCard :title="sqlBuildTitle">
      <VCardText v-if="sqlLanguage == 'DML' && tableType == 'single' && sqlType == 'select'">
        <SqlBuildSelect
          :curr-row="currRow"
          @update-sql="updateSql"
        />
      </VCardText>

      <VCardText v-else-if="sqlLanguage == 'DML' && tableType == 'single' && sqlType == 'insert'">
        <SqlBuildInsert />
      </VCardText>

      <VCardText v-else-if="sqlLanguage == 'DML' && tableType == 'single' && sqlType == 'update'">
        <SqlBuildUpdate />
      </VCardText>

      <VCardText v-else-if="sqlLanguage == 'DML' && tableType == 'single' && sqlType == 'delete'">
        <SqlBuildDelete />
      </VCardText>

      <VCardText v-else>
        暂不支持构建该类型SQL
      </VCardText>

      <VCardText
        class="d-flex justify-end gap-3 flex-wrap"
        style="block-size: 401px;"
      >
        <Codemirror
          ref="logRef"
          v-model:value="logStr"
          :options="logOptions"
          border
          width="100%"
        />
        <!--
          <VBtn
          color="secondary"
          variant="tonal"
          @click="execVisible = false"
          >
          关闭
          </VBtn> 
        -->
        <!--
          <VBtn @click="execOper">
          构建
          </VBtn> 
        -->
      </VCardText>
    </VCard>
  </VDialog>
</template>

<style scoped>
.w-100 {
  inline-size: 100%;
}

.exec-mt {
  margin-block: 4px 4px;
}
</style>
<style>
.ivy-sql-build-dialog .v-overlay__content{
  overflow:visible !important
}
</style>
